import React from 'react'

interface UserState {
    name: string;
    lastname: string
}
interface Action {
    type: string;
    data: any;
}
const actionIds = {
    setName: "setname",
    setLastname: "setlastname"
}
const userInfoReducer = (state: UserState, action: Action): UserState => {
    switch (action.type) {
        case actionIds.setName:
            return {
                ...state,
                name: action.data
            }
        case actionIds.setLastname:
            return {
                ...state,
                lastname: action.data
            }
        default:
            return state
    }
}

interface Props {
    name: string;
    dispatch: React.Dispatch<Action>
}
const Editusername: React.FC<Props> = React.memo((props) => {
    return (
        <input
            value={props.name}
            onChange={(e) => 
                props.dispatch({type: actionIds.setName, data: e.target.value})}
        />
    )
})
// 消费数据
// redux reducer useReducer  函数式编程
const Demo = () => {
    const [userInfo, dispatch] = React.useReducer(userInfoReducer, {
        // 读的状态
        // dispatch 能力
        // 初始值
        name: "John",
        lastname: "Dev"
    })
        return (
        <h3>
            {userInfo.name} {userInfo.lastname}
            <Editusername name={userInfo.name} dispatch={dispatch} />
            <input 
                value={userInfo.lastname}
                onChange={(e) => dispatch({type: actionIds.setLastname, data: e.target.value})}
            />
        </h3>
    )
    }

export default Demo